<template>
    <div class="enterprise-mobile-setting">
        <div class="enterprise-title">
            {{ $t('setting.enterprise.mobile.title') }}
        </div>
        <div class="enterprise-content">
            <div class="login-logo">
                <div class="login-logo-left">
                    <div class="login-logo-left-title">{{ $t('setting.enterprise.mobile.loginLogo.title') }}</div>
                    <div class="login-logo-left-content">
                        <el-upload class="upload-login-logo" list-type="text" action="string" :auto-upload="false"
                            :on-change="changeLoginLogoUpload" :fileList="loginLogoFileList"
                            :on-remove="handleLoginLogoRemove">
                            <el-button size="small" type="primary">{{ $t('common.base.clickForUploading') }}</el-button>
                        </el-upload>
                    </div>
                    <div class="login-logo-left-tip">{{ $t('setting.enterprise.mobile.loginLogo.tip1') }}</div>
                </div>
                <div class="login-logo-right">
                    <div class="login-logo-right-content"
                        :style="`background-image: url(${getAppLogin()})`">
                        <img :src="loginLogoPreviewSrc" alt="">
                    </div>
                </div>
            </div>
            <div class="enterprise-content-footer">
                <div class="application-icon">
                    <div class="application-icon-title">
                        <div class="application-icon-title-content">
                            {{ $t('product.qrcodeSetting.paasApplyTemplate.linkPaasIcon') }}
                        </div>
                    </div>
                    <div class="application-icon-tip">
                        <el-icon class="el-icon-warning" style="line-height: 32px; color: #8C8C8C;"></el-icon>
                        <div class="application-icon-tip-content">
                            {{ $t('setting.enterprise.mobile.application.tip1') }}
                        </div>
                    </div>
                    <div class="application-icon-content" :class="{ hidebox: applicationIconFileList.length == 1 }">
                        <biz-cropper-upload action="string" list-type="picture-card" accept="image/png"
                            :on-preview="handlePictureCardPreview" :before-upload="onBeforeUploadImage"
                            :http-request="UploadImagePic" :file-list="applicationIconFileList" :on-exceed="onExceedPic"
                            :on-remove="onRemovePic" @cropperDone="picCropperDone" multiple :limit="1" :cropper="{
                                autoCropWidth: 1024,
                                autoCropHeight: 1024,
                                fixedNumber: [1, 1],
                            }" :cropSize="{
                                width: 1024,
                                height: 1024,
                            }" :showOriginSwitch="false" :max-file-size="2097152" formEditingMode="edit"
                            @getDeleteFiles="getDeleteFiles">
                        </biz-cropper-upload>
                        <div class="application-icon-content-status" v-if="appIconsStatus">
                            <div class="application-icon-content-status-content"
                                :class="appIconsStatus === '4' ? 'status-success' : 'status-review'">
                                {{ appIconsStatus === '1' ? $t('setting.enterprise.status2') :
                                appIconsStatus === '2' ? $t('setting.enterprise.status3') :
                                appIconsStatus === '3' ? $t('setting.enterprise.status4') :
                                appIconsStatus === '4' ? $t('common.base.usualStatus.finish') : '' }}
                            </div>
                            <el-button type="text" v-if="appIconsStatus === '4' || appIconsStatus === '1'" @click="recoverApplication">
                                {{ $t('setting.enterprise.mobile.application.recover') }}
                            </el-button>
                        </div>
                    </div>
                    <div class="application-icon-footer">
                        {{ $t('setting.enterprise.mobile.application.tip2') }}
                    </div>
                </div>
                <div class="start-picture">
                    <div class="start-picture-title">
                        <div class="start-picture-title-content">{{ $t('setting.enterprise.mobile.startPicture.title') }}</div>
                    </div>
                    <div class="start-picture-tip">
                        <el-icon class="el-icon-warning" style="line-height: 32px; color: #8C8C8C;"></el-icon>
                        <div class="start-picture-tip-content">{{ $t('setting.enterprise.mobile.startPicture.tip1') }}</div>
                    </div>
                    <div class="start-picture-content">
                        <el-upload action="string" list-type="picture" :auto-upload="false" drag
                            :on-change="changeStartPicture" :show-file-list="false" :file-list="startPictureFileList">
                            <div v-if="startPictureFile" class="start-picture-content-img">
                                <img :src="startPictureFile" alt="">
                            </div>
                            <i class="el-icon-plus" v-else></i>
                        </el-upload>
                        <el-button type="text" v-if="startPictureFile" @click="clearStartPicture">{{ $t('common.base.clear1') }}</el-button>
                    </div>
                    <div class="start-picture-footer">
                        {{ $t('setting.enterprise.mobile.startPicture.tip2') }}
                    </div>
                </div>
            </div>
        </div>
        <div class="enterprise-footer">
            <el-button type="primary" :disabled="!isCanSave" @click="saveMobile">
                {{ $t('common.base.save') }}
            </el-button>
            <el-checkbox style="margin-left: 8px;" v-model="isAgree">{{ $t('common.base.agree') }}</el-checkbox>
            <a href="#" class="enterprise-footer-agreement" @click="goPrivacy">《{{ $t('setting.enterprise.mobile.agreement') }}》</a>
        </div>
    </div>
</template>

<script>
import platform from '@src/platform'
import BizCropperUpload from '@src/component/business/BizCropperUpload/BizCropperUpload.vue';
import Uploader from 'packages/BaseUpload/uploader';
import { settingInfo } from '@src/modules/setting/common/enterprise/api';
import { saveValueAddedClue } from '@src/api/Clue';
import { getRootWindow } from '@src/util/dom';
import { getOssUrl } from '@src/util/assets';

export default {
    name: "mobile",
    props: {
        appSettingParam: {
            type: Object,
            default: () => {
                return {};
            }
        }
    },
    data() {
        return {
            uploadUrl: '',
            applicationIconFileList: [],
            applicationIconPreviewSrc: '',
            appIconsStatus: '',
            startPictureFile: '',
            startPictureFileList: [],
            loginLogoFileList: [],
            loginLogoPreviewSrc: '',
            appIconsTime: '', // app图标修改年份与次数
            isAgree: false,
        }
    },
    created() {
        this.appIconsStatus = this.appSettingParam?.appIconsStatus || '';
        this.applicationIconFileList = this.appSettingParam?.appIconUrl ? [{ url: this.appSettingParam.appIconUrl }] : [{ url: getOssUrl('/setting/app_logo.png') }];
        this.startPictureFile = this.appSettingParam?.startupPictureUrl || '';
        this.loginLogoPreviewSrc = this.appSettingParam?.loginPageLogoUrl || getOssUrl('/logo_green.png');
        this.appIconsTime = this.appSettingParam?.appIconsTime || '';
    },
    components: {
        BizCropperUpload,
    },
    computed: {
        isCanSave() {
            return this.applicationIconPreviewSrc || this.startPictureFileList.length > 0 || this.loginLogoFileList.length > 0;
        }
    },
    methods: {
        getAppLogin() {
            return getOssUrl('/setting/app_login.png');
        },
        // 跳转用户协议
        goPrivacy() {
            let url = 'https://doc.shb.ltd/shb_dh7hof/yhxy.html';
            platform.openLink(url);
        },
        // 点击app应用图标图片详情
        handlePictureCardPreview(file) {
            this.$previewElementImg(file.url);
        },
        // app应用图标上传前检测
        onBeforeUploadImage(file) {
            const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
            if (!isJPG) {
                this.$message.error('上传图片只能是PNG 格式!');
                return false;
            }
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isLt2M) {
                this.$message.error('上传应用大小不能超过 2MB!');
                return false;
            }
            return false;
        },
        // app应用图标上传数量限制
        onExceedPic(files, fileList) {
            this.$message.warning('只能上传一张图片');
        },
        // app应用图标移除
        onRemovePic(file, fileList) {
            this.applicationIconFileList = fileList;
            this.applicationIconPreviewSrc = getOssUrl('/setting/app_logo.png');
            this.appIconsStatus = '';
        },
        // app应用图标裁剪完成
        picCropperDone(file, data) {
            if (data.size > 2 * 1024 * 1024) {
                this.$message.error('上传图片大小不能超过2M');
                return;
            }
            this.applicationIconFileList = [file];
            this.applicationIconPreviewSrc = data.ossUrl;
        },
        // app应用图标删除
        getDeleteFiles(files) {
            this.applicationIconFileList = files;
        },
        // app应用图标上传
        UploadImagePic(file) {
            console.log(file);
            return new Promise((resolve, reject) => {
                let reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = (e) => {
                    resolve(e.target.result);
                };
            });
        },
        // 恢复默认app图标
        recoverApplication() {
            this.applicationIconFileList = [{ url: getOssUrl('/setting/app_logo.png') }];
            this.applicationIconPreviewSrc = getOssUrl('/setting/app_logo.png');
            this.appIconsStatus = '';
        },
        // 登录页Logo上传
        changeLoginLogoUpload(file, fileList) {
            // 检测是否超过1M
            if (file.raw.size > 1 * 1024 * 1024) {
                this.$message({
                    message: '上传图片大小不能超过1M',
                    duration: 1500,
                    type: 'error',
                });
                fileList.pop();
                this.loginLogoFileList = fileList;
                return;
            }
            if (fileList.length > 1) {
                fileList.shift();
            }
            this.loginLogoFileList = fileList;
            this.loginLogoPreviewSrc = URL.createObjectURL(file.raw);
        },
        // 启动图片上传
        changeStartPicture(file, fileList) {
            // 检测是否超过3M
            if (file.raw.size > 3 * 1024 * 1024) {
                this.$message({
                    message: '上传图片大小不能超过3M',
                    duration: 1500,
                    type: 'error',
                });
                return;
            }
            if (fileList.length > 1) {
                fileList.shift();
            }
            this.startPictureFileList = fileList;
            this.startPictureFile = URL.createObjectURL(file.raw);
        },
        // 清除启动图片
        clearStartPicture() {
            this.startPictureFile = '';
            this.startPictureFileList = [
                {
                    raw: null,
                }
            ];
        },
        // 移除登录页Logo
        handleLoginLogoRemove() {
            this.loginLogoPreviewSrc = getOssUrl('/logo_green.png'); // 移除预览
            this.loginLogoFileList = []; // 移除文件
        },
        // 保存移动端设置
        saveMobile() {
            if (!this.isAgree) {
                this.$message.error('请勾选《企业用户协议》');
                return;
            }
            if (this.applicationIconPreviewSrc) {
                // appIconsTime格式为年份-次数，判断本年是否已经上传过两次
                const year = new Date().getFullYear();
                if (this.appIconsTime && this.appIconsTime.split('_')[0] == year && this.appIconsTime.split('_')[1] >= 2) {
                    this.$message.error('应用图标每年只能上传两次');
                    return;
                }
                this.appIconsStatus = '1';
            }

            const uploads = [];

            if (this.loginLogoFileList.length > 0) {
                const loginLogoUpload = Uploader.upload(this.loginLogoFileList[0].raw, '/files/upload')
                    .then(result => {
                        if (result.status == 0) {
                            return {
                                url: result.data.ossUrl || result.data.url || `/files/get?fileId=${result.data.id}`,
                                type: 'loginPageLogoUrl'
                            }
                        } else {
                            this.$message.error('登录页Logo上传失败');
                        }
                    });
                uploads.push(loginLogoUpload);
            }

            if (this.startPictureFileList.length > 0) {
                let startPictureUpload;
                if (this.startPictureFileList[0].raw == null) {
                    startPictureUpload = Promise.resolve({
                        url: '',
                        type: 'startupPictureUrl'
                    });
                } else {
                    startPictureUpload = Uploader.upload(this.startPictureFileList[0].raw, '/files/upload')
                        .then(result => {
                            if (result.status == 0) {
                                return {
                                    url: result.data.ossUrl || result.data.url || `/files/get?fileId=${result.data.id}`,
                                    type: 'startupPictureUrl'
                                }
                            } else {
                                this.$message.error('启动图片上传失败');
                            }
                        });
                }
                uploads.push(startPictureUpload);
            }

            Promise.all(uploads).then(results => {
                let appIconUrl = this.applicationIconPreviewSrc;
                let loginPageLogoUrl = this.loginLogoPreviewSrc;
                let startupPictureUrl = this.startPictureFile;
                let appIconsTime = this.appIconsTime;
                let appIconsStatus = this.applicationIconPreviewSrc == getOssUrl('/setting/app_logo.png') ? '4' : this.appIconsStatus;

                results.forEach((result, index) => {
                    if (result.type === 'appIconUrl') {
                        appIconUrl = result.url;
                    } else if (result.type === 'loginPageLogoUrl') {
                        loginPageLogoUrl = result.url;
                    } else if (result.type === 'startupPictureUrl') {
                        startupPictureUrl = result.url;
                    }
                });

                settingInfo({
                    appSettingParam: {
                        appIconUrl,
                        appIconsStatus,
                        appIconsTime,
                        copywriting: "",
                        loginPageLogoUrl,
                        startupPictureUrl,
                    },
                    tenantId: JSON.parse(getRootWindow(window)._init).user.tenantId,
                    type: '2'
                }).then((res) => {
                    if (res.status == 0) {
                        this.$message.success(this.$t('common.base.saveSuccess'));
                        if (this.applicationIconPreviewSrc) {
                            saveValueAddedClue({
                                type: 18,
                            })
                        }
                        this.applicationIconPreviewSrc = '';
                        this.startPictureFileList = [];
                        this.loginLogoFileList = [];
                    } else {
                        this.$message.error(res.message);
                    }
                });
            }).catch(error => {
                this.$message.error(error.message);
            });
        }
    }
}
</script>

<style lang="scss" scoped>
::v-deep .is-disabled {
    background-color: var(--color-primary-light-3) !important;
    border-color: var(--color-primary-light-3) !important;
}
::v-deep .is-disabled:hover {
    background-color: var(--color-primary-light-3) !important;
    border-color: var(--color-primary-light-3) !important;
}
.enterprise-mobile-setting {
    width: 100%;
    background-color: #fff;
    margin-top: 12px;
    overflow: hidden;
    border-radius: 4px;

    .enterprise-title {
        font-size: 18px;
        font-weight: 500;
        color: #262626;
        padding: 12px 16px;
        // height: 50px;
        border-bottom: 1px solid #E4E7ED;
    }

    .enterprise-content {
        padding: 0 16px;
        margin: 16px 0 16px 0;

        .login-logo {
            &-left {
                &-title {
                    font-size: 14px;
                    font-weight: 400;
                    color: #262626;
                    margin-bottom: 8px;
                    line-height: 22px;
                }

                &-content {
                    height: 40px;

                    ::v-deep .el-upload-list {
                        margin-top: 48px;
                    }
                }

                &-tip {
                    height: 20px;
                    line-height: 20px;
                    font-size: 12px;
                    font-weight: 400;
                    color: #8C8C8C;
                }
            }

            &-right {
                width: 570px;
                height: 408px;
                overflow: hidden;

                &-content {
                    height: 376px;
                    width: 300px;
                    text-align: center;
                    margin-top: 48px;
                    background-size: 100% 100%;

                    img {
                        width: 218px;
                        height: 40px;
                        margin-top: 90px;
                        object-fit: contain;
                    }
                }
            }
        }

        .enterprise-content-footer {
            display: flex;
            border-top: 1px solid #E4E7ED;
            margin-top: 24px;
            padding-top: 24px;

            .application-icon {
                padding: 0 32px 24px 0;
                border-right: 1px solid #E4E7ED;
                min-width: 530px;

                &-title {
                    line-height: 32px;
                    display: flex;

                    &-content {
                        font-size: 14px;
                        font-weight: 400;
                        margin-right: 4px;
                    }
                }

                &-tip {
                    display: flex;
                    align-items: center;
                    &-content {
                        font-size: 14px;
                        font-weight: 400;
                        color: #8C8C8C;
                        margin-left: 4px;
                    }
                }

                .hidebox ::v-deep .el-upload--picture-card {
                    display: none;
                }

                &-content {
                    height: 120px;
                    display: flex;
                    margin-top: 8px;

                    &-status {
                        display: flex;
                        height: 56px;
                        line-height: 56px;
                        margin-top: 80px;
                        margin-left: 8px;

                        &-content {
                            margin-right: 9px;
                        }
                    }

                    .status-success::before {
                        content: '';
                        display: inline-block;
                        width: 8px;
                        height: 8px;
                        background-color: #07C160;
                        border-radius: 50%;
                        margin-right: 5px;
                        margin-bottom: 1px;
                    }

                    .status-review::before {
                        content: '';
                        display: inline-block;
                        width: 8px;
                        height: 8px;
                        background-color: #FAAB0C;
                        border-radius: 50%;
                        margin-right: 5px;
                        margin-bottom: 1px;
                    }

                    ::v-deep .el-upload-list__item {
                        transition: none !important;
                    }

                    ::v-deep .el-upload-list__item label {
                        padding: 0;
                    }

                    ::v-deep .el-upload--picture-card {
                        width: 120px;
                        height: 120px;
                        line-height: 120px;
                        margin-bottom: 6px;

                        &:hover {
                            border-color: $color-primary;
                        }
                    }

                    ::v-deep .el-upload-list__item {
                        width: 120px;
                        height: 120px;
                    }
                }

                &-footer {
                    height: 22px;
                    line-height: 22px;
                    margin-top: 8px;
                    color: #595959;
                }
            }

            .start-picture {
                padding: 0 0 0 32px;
                min-width: 380px;

                &-title {
                    height: 32px;
                    line-height: 32px;
                    display: flex;

                    &-content {
                        font-size: 14px;
                        font-weight: 400;
                        margin-right: 4px;
                    }
                }

                &-tip {
                    display: flex;
                    align-items: center;
                    &-content {
                        font-size: 14px;
                        font-weight: 400;
                        color: #8C8C8C;
                        margin-left: 4px;
                    }
                }

                &-content {
                    height: 180px;
                    display: flex;
                    align-items: end;
                    margin-top: 8px;

                    ::v-deep .el-upload-dragger {
                        width: 120px;
                        height: 180px;
                        display: flex;
                        margin-right: 4px;

                        .el-icon-plus {
                            width: 26px;
                            height: 26px;
                            margin: auto;
                            font-size: 26px;
                            color: #BFBFBF;
                        }

                        .start-picture-content-img {
                            width: 100%;
                            height: 100%;

                            img {
                                width: 100%;
                                height: 100%;
                                object-fit: contain;
                            }
                        }

                        .start-picture-content-img:hover::after {
                            content: '点击修改';
                            position: absolute;
                            bottom: 0;
                            left: 0;
                            right: 0;
                            background-color: rgba(0, 0, 0, 0.5);
                            color: #fff;
                            height: 100%;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                        }
                    }
                }

                &-footer {
                    line-height: 22px;
                    margin-top: 8px;
                    color: #595959;
                }
            }
        }
    }

    .enterprise-footer {
        padding: 0 16px 24px 16px;
        display: flex;
        align-items: center;

        &-agreement {
            margin-left: 10px;
            color: $color-primary;
        }
    }
}
</style>